<template>
    <div style="width:55%">
        <h1 class="name"><i class="el-icon-arrow-left back" @click="goBack()"></i> 编写个人资料 </h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="工作状态" prop="workstatus">
                <el-select v-model="ruleForm.workstatus" placeholder="请选择工作状态" style="width:100%">
                <el-option label="暂无想法" value="暂无想法"></el-option>
                <el-option label="找工作中" value="找工作中"></el-option>
                <el-option label="已有工作" value="已有工作"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="已授学历" prop="education">
                <el-select v-model="ruleForm.education" placeholder="请选择学历" style="width:100%">
                <el-option label="博士" value="博士"></el-option>
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="大专" value="大专"></el-option>
                <el-option label="中专" value="中专"></el-option>
                <el-option label="九年义务教育" value="九年义务教育"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="联系方式" prop="phone" style="width:320px;">
                <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item> -->
            <el-form-item label="个人优势" prop="advantage">
                <el-input type="textarea" v-model="ruleForm.advantage"></el-input>
            </el-form-item>
            <el-form-item label="求职类型" prop="exceptjob">
                <el-select v-model="ruleForm.exceptjob" placeholder="请选择求职类型" style="width:100%">
                <el-option label="不限求职类型" value="不限求职类型"></el-option>
                <el-option label="全职" value="全职"></el-option>
                <el-option label="兼职" value="兼职"></el-option>
                <el-option label="实习" value="实习"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工作城市" prop="workcity">
               <linkage  style="width:100%"
                    v-on:listenProvince="showProvince"
                    v-on:listenCity="showCity"
                    v-on:listenRegion="showRegion">
                    </linkage>
            </el-form-item>
            <el-form-item label="期望职位" prop="exceptwork" style="width:100%">
                <el-input v-model="ruleForm.exceptwork" placeholder="请输入期望职位"></el-input>
            </el-form-item>
            <el-form-item label="期望薪资" prop="salaryrequire">
                    <el-select v-model="ruleForm.salaryrequire" placeholder="请选择薪资范围" style="width:100%">
                        <el-option label="3k~5k" value="3k~5k"></el-option>
                        <el-option label="5k~7k" value="5k~7k"></el-option>
                        <el-option label="7k~10k" value="7k~10k"></el-option>
                        <el-option label="10k~15k" value="10k~15k"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item> 
                <el-button @click="resetForm('ruleForm')" class="chongzhi">重置</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" class="button">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Linkage from '@/components/linkage';
export default {
    components:{ Linkage },
    data() {
      return {
        ruleForm: {
          workstatus:'',
          education:'',
        //   phone:'',
          advantage:'',
          exceptjob:'',
          workcity:'',
          exceptwork:'',
          salaryrequire:'',
        },
        rules: {
            // phone: [
            //     { required: true, message: '请输入手机号码', trigger: 'blur' },
            //     { min: 11, max: 11, message: '请输入11位数字号码', trigger: 'blur' }
            // ],
            workstatus: [
                { required: true, message: '请选择工作状态', trigger: 'change' }
            ],
            education: [
                { required: true, message: '请选择学历', trigger: 'change' }
            ],
            exceptjob: [
                { required: true, message: '请选择求职类型', trigger: 'change' }
            ],
            exceptwork: [
                { required: true, message: '请选择期望职位', trigger: 'change' }
            ],
            salaryrequire: [
                { required: true, message: '请选择薪资范围', trigger: 'change' }
            ],
            advantage: [
                { required: true, message: '请填写个人优势', trigger: 'blur' }
            ]
        }
      };
    },
    methods: {
      goBack(){
         this.$router.push("./PersonalResume")
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          let ruleForm = this.ruleForm;
          if (valid) {
             function a(){
               depot.post({
                url:'empservice/resume/saveResume',
                data:{
                    'education':ruleForm.education,
                    'workstatus':ruleForm.workstatus,
                    'advantage':ruleForm.advantage
                },
                cb:(res)=>{
                    console.log("学历，工作状态，个人优势传入数据库:",res);
                }
            })
               depot.post({
                url:'empservice/exceptaboutjob/editExceptAoboutJob',
                data:{
                    'exceptjob':ruleForm.exceptjob,
                    'exceptwork':ruleForm.exceptwork,
                    'salaryrequire':ruleForm.salaryrequire,
                    'workcity':ruleForm.workcity
                },
                cb:(r)=>{
                    console.log("期待存库",r);
                }
            })
            }
            a() 
            
            // console.log(a);
            setTimeout(()=>{
                alert("保存成功")
                this.$router.push("./PersonalResume")
            },2000)


            // ？？？需要等待axios请求成功后再进行页面切换(即异步改为同步)，不然数据存储不及时导致数据渲染延迟
            
          } else { 
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    //组件传值（子传父）
        showProvince(data){},
        showCity(data){this.ruleForm.workcity = data;},
        showRegion(data){},
    },
    mounted:function(){
        this.bus.$on('info1',(res)=>{
            console.log(res);
        })
    }
  }
</script>

<style lang="less" scoped>
.el-form-item {
    margin-bottom: 20px;
}
.name{
    color: #353535;
    font-size: 26px;
}
.button{
    // margin-left: 163px;
    background-image: linear-gradient(#7a7878, #5a5a5a);
    border: none;
    float: right;
}
.chongzhi{
    margin-left: -80px;
}
.back{
    font-size: 20px;
    margin-left: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: 600;
    border-radius: 50%;
    margin-right: 30px;
}
</style>